<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue(js框架)静态资源文件-->
    <script type="text/javascript" src="vue-2.6.14/vue.js"></script>
</head>
<body>
    <div id="app">
        <label>{{message}}</label><hr/>
        <label v-text="message"></label><hr/>
        <input type="text" v-bind:value="message"><hr/>
        <input type="text" v-model="message"><hr/>
        <button type="button" v-on:click="change">点击</button><br/>
        <button type="button" @click="query">query</button>

        <li v-for="item in list">
            {{item.username}}
        </li>

    </div>
    <script type="text/javascript" src="axios-0.21.1/axios.min.js"></script>
    <script type="text/javascript">
        //创建一个vue对象
        var vue = new Vue({
            el: '#app',//与上面的div块进行绑定,vue所有操作只对该div块有效
            data: {
                message: "hello vue",
                list: []
            },
            methods: {
                change: function() {
                    this.message += "好久不见"
                },
                query: function () {
                    var it = this;
                    axios.post('UserinfoQuery', {
                        username: '',
                        userid: ''
                    }).then(function (result){
                        console.log(result);
                        it.list = result.data
                    }).catch(function (error){
                        console.log(error)
                    })
                }
            }
        })
    </script>
</body>
</html>